<template>
	<view class="shop">
		<view class="shop-t n-pag">
			<view class="shop-tit">
				{{title}}
			</view>
			<view class="shop-info">
				<text class="writer">{{writer}}</text><text>{{time}}</text>
			</view>
		
		</view>
	<view class="shop-item">
		
			<view class="shop-body">
				<view>
					<rich-text type="text" :nodes="body"></rich-text>
				</view>
			</view>
			<view class="click">
				<text>阅读：{{click}}</text>
			</view>
		</view>
		<view class="shop-more">
	
		
				<view class="shop-more-a"  @tap="zans()">
					<text :class="'iconfont '+(islove ? 'icon-aixin1':'icon-02')"></text>
					<text class="zan-size">{{zan}}</text>
				</view>
		
		
				<button open-type="share" class="shop-more-a">
					<text class="iconfont icon-fenxiang"></text>
					<text class="shop-more-tit">分享好友</text>
				</button>
		
		</view>
		<view class="shop-br"></view>
		<view class="art-hot">
			<view class="art-hot-tit">
				您可能还喜欢
			</view>
			<view class="news_list_box">
			<view class="news_ul">
				<view class="news_li" v-for="(item,index) in newsList">
					<view @tap="artlink" :data-typename="item.typename" :data-channelid="item.channel" :data-id="item.id" class="list-arc-li flex_box"
					 hover-class="none">
					
						<view class="news_txt flex">
							<view class="news_title">
								{{item.title}}
							</view>
							<view class="new-info">
							<text>发布：{{item.stimes}}</text>	<text>点赞:{{item.zan}}</text>
							</view>
						</view>
							<image :src="item.litpic" mode="aspectFill" class="news_img" />
					</view>
				</view>
			</view>
			</view>
		</view>

	

	</view>
</template>

<script>
	import graceRichText from '../../utils/richText.js'

	import {
		ajaxview,
		ajaxzan,
		ajaxlist,
		ajaxclick
	} from '../../utils/api.js'
	export default {
		data() {
			return {
				aid: '',
				channlid: '',
				body: '',
				dt: '',
				title: '',
				typename: '',
				time:'',
				click:'',
				zan:'',
				writer:'',
				islove:0,
				newsList:[]
			}
		},
		onShareAppMessage(res) {
			
			return {
				title: this.title,
				imageUrl: this.dt
			}
		},
		onLoad(options) {
			var that = this
			console.log(options)
			that.aid = options.aid
			that.channlid = options.channlid
			that.typename = options.typename
			that.loadart()
			ajaxclick(that.aid); //浏览次数，无需反馈
			that.newsList = that.getList(3, 1, 4);
			
		},
		methods: {
			loadart: function() {
				let that = this
				ajaxview(that.aid, that.channlid).then(res => {
				
					if (res.data.data) {
						that.body = graceRichText.format(res.data.data.body)
						that.dt = res.data.data.cfg_basehost + res.data.data.litpic
						that.title = res.data.data.title
						that.time=res.data.data.time
						
						that.writer=res.data.data.writer
						that.click=res.data.data.click
						that.zan=res.data.data.zan
						uni.setNavigationBarTitle({
						    title: res.data.data.title
						});
					}
				})
			},
			artlink:function(e){
				
				let {id,channelid,typename} = e.currentTarget.dataset
				 uni.navigateTo({
				                    url: '../art/art?aid=' + id+'&channlid='+channelid+'&typename='+typename
				                });
			},
			zans: function() {
				var that = this
				if(!that.islove){
				ajaxzan(that.aid).then((res) => {
					if (res.data.state === 1) {
						that.islove = 1
						that.zan = res.data.data
					}
				})
				}else{
					uni.showToast({
						 title: '您已经点过赞了',
						 icon:'success',
						    duration: 2000
					})
				}
			},
			getList: function(typeId, pageNum, pageSize) {
				var that = this;
				let data = [];
				ajaxlist(typeId, pageNum, pageSize).then((res) => {
					if (res.data && res.data.data) {
						for (let i = res.data.data.length - 1; i >= 0; i--) {
							res.data.data[i].typelitpics = res.data.data[i]['cfg_basehost'] + res.data.data[i]['banner_pic_link']
							res.data.data[i].litpic = res.data.data[i]['cfg_basehost'] + res.data.data[i]['litpic']
							data.push(res.data.data[i]);
						}
						/*
						不知为何map后的数组无法返回
						let datas = res.data.data.map((res) => {
							return {
								typelitpic: res.cfg_basehost + res.litpic,
								typeid: res.id,
								typename: res.typename,
								title: res.title
							}
						})
						data=datas
						*/
			
					}
				})
				return data
			},
			
		}
	}
</script>

<style lang="scss">
	.shop {
		background-color: #fff;
	}

	.shop-br {
		background-color: #f3f3f3;
		padding: 1vw 2vw;
		width: 100%;
	}

	.shop-dt {
		width: 100%;

		.pic_img {
			width: 100%;
		}
	}

	.shop-t {
		.shop-tit {
			font-size: 4.6vw;

		}

		.shop-info {
			margin-top: 3vw;
			font-size: 3vw;
			color: #999;
			.writer{
				color: $base;
				margin-right: 2vw;
			}
		}
	}

	.n-pag {
		padding: 3vw 4vw;
	}

	.shop-more {
		margin-top: 4vw;
		margin-bottom: 4vw;
		text-align: right;
		padding: 0px 4vw;
		.shop-more-a {
			display: inline-block;
			vertical-align: middle;
			line-height: 1.2;
			border: none;
			padding: 0;
			margin: 0px 3vw;
			font-size: 3vw;
			background-color:transparent !important;
	
			&:after{
				border: none;
				background-color:#transparent !important;
			}
			color: #888;

			.iconfont {
				font-size: 4vw;
				margin-right: 1vw;
				display: inline-block;
				vertical-align: middle;
				&.icon-aixin1{
					color: red;
				}
			}

			.shop-more-tit {
				font-size: 3vw;
			}
		}
	}
  .click{
	  color: #ccc;
	  padding: 2vw 2vw;
	  margin: 0px 3vw;
	  font-size: 3.2vw;
	  border-bottom: 1px solid #efefef;
  }
	.shop-item {}

	.shop-type {
		padding: 3vw;
		text-align: center;
		color: $base;
		font-weight: 700;
		font-size: 3.6vw;
    
		text {
			position: relative;
		}

		.right_hr {
			left: 110%;
			background: linear-gradient(to left, rgba(0, 37, 106, 0), rgba(0, 37, 106, 1));
		}

		.left_hr,
		.right_hr {
			width: 5vw;
			margin-top: -0.3vw;
			height: 0.6vw;
			position: absolute;
			top: 50%;
		}

		.left_hr {
			right: 110%;
			background: linear-gradient(to right, rgba(0, 37, 106, 0), rgba(0, 37, 106, 1));
		}
	}

	.shop-body {
		padding: 0 3vw 2vw;
		font-size: 4vw;
		line-height: 1.8;
	}
	.art-hot{
		background-color: #f3f3f3;
		padding-bottom: 4vw;
		}
	.art-hot-tit{
		font-size: 3.6vw;
		color: #ccc;
		padding: 3vw;
		}
	.news_list_box {
		margin: 0vw 2vw 2vw;
		
		.news_ul {
	
			border-radius: 2vw;
			overflow: hidden;
		}
	
		.news_li {
			width: 100%;
			background-color: #fff;
	
			.news_title {
				font-size: 3.8vw;
				color: #4c4c4c;
			}
	.new-info{ margin-top: 2vw;
		font-size: 3vw; color: #ccc;
		text{
			margin-right: 2vw;
		}
	}
	
			.list-arc-li.flex_box {
				padding: 2vw;
	
				.news_img {
					width: 14vw;
					height: 14vw;
				}
	
				.news_txt {
					padding: 2vw;
					margin-left: 2vw;
	
				}
			}
		}
	
	}
</style>
